<template>
  <div class="nav-container">
    <div class="left">
      <img class="imChatImage" src="../assets/images/imchat.png" alt="logo" />
      <span class="logo">IMCHAT</span>
    </div>
    <div class="right">
      <FriendRequestNotification />
      <a-dropdown>
        <a class="ant-dropdown-link" @click.prevent>
          <a-avatar :src="userAvatar" size="large" />
          <span class="username">{{ username }}</span>
        </a>
        <!-- 下拉菜单内容 -->
        <template #overlay>
          <a-menu @click="onClick">
            <a-menu-item key="1">
              <UserOutlined /> <span style="margin-left: 8px">个人简介</span>
            </a-menu-item>
            <a-menu-item key="2"
              ><SettingOutlined />
              <span style="margin-left: 8px">设置</span></a-menu-item
            >
            <a-menu-item key="3"
              ><LogoutOutlined /><span style="margin-left: 8px"
                >退出</span
              ></a-menu-item
            >
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
  <UserProfileModal v-model:visible="showUserProfile" :userList="userList" />
  <UserSettingsModal
    v-model:visible="showSettings"
    :userInfo="userList"
    @refresh="fetchUserInfo"
  />
</template>

<script lang="ts" setup>
import { h, ref, onMounted, computed } from "vue";
import {
  MailOutlined,
  AppstoreOutlined,
  UserOutlined,
  LogoutOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";
import { MenuProps } from "ant-design-vue";
import FriendRequestNotification from "@/components/FriendRequestNotification.vue";
import { useAuthStore } from "@/store/auth";
import { getUserById } from "@/api/user";
import UserProfileModal from "@/components/UserProfileModal.vue";
import UserSettingsModal from "@/components/UserSettingsModal.vue";
import router from "@/router";

const onClick: MenuProps["onClick"] = async ({ key }) => {
  if (key === "1") {
    // 个人简介
    await fetchUserInfo();
    showUserProfile.value = true;
  } else if (key === "2") {
    // 设置
    await fetchUserInfo();
    showSettings.value = true;
  } else if (key === "3") {
    // 退出
    authStore.logout();
    router.push("/login");
  }
};

const current = ref<string[]>(["mail"]);
const items = ref<MenuProps["items"]>([
  {
    key: "mail",
    icon: () => h(MailOutlined),
    label: "Navigation One",
    title: "Navigation One",
  },
  {
    key: "app",
    icon: () => h(AppstoreOutlined),
    label: "Navigation Two",
    title: "Navigation Two",
  },
  {
    key: "alipay",
    label: h(
      "a",
      { href: "https://antdv.com", target: "_blank" },
      "Navigation Four - Link"
    ),
    title: "Navigation Four - Link",
  },
]);

const authStore = useAuthStore();
const userAvatar = computed(() => authStore.user?.avatar);
const username = computed(() => authStore.user?.username);

// 添加响应式变量
const showUserProfile = ref(false);
const showSettings = ref(false);

interface UserInfo {
  username: string;
  nickname: string;
  avatar: string;
  email: string;
  phone: string;
  age: number;
}

// 根据id获取用户信息
const userList = ref<UserInfo | null>(null);
const fetchUserInfo = async () => {
  try {
    const userId = authStore.user?.id;
    if (!userId) return; // 如果 id 不存在则返回

    const response = await getUserById(userId);
    if (response.data.code === 200) {
      userList.value = response.data.data;
    } else {
      console.error("获取用户信息失败");
    }
  } catch (error) {
    console.error("获取用户信息失败:", error);
  }
};

fetchUserInfo();
</script>

<style scoped>
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
}

.imChatImage {
  margin-right: 30px;
  height: 40px;
  width: 40px;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  color: #1890ff;
}

.nav-bottom {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}

.logout-icon {
  color: #ff4d4f;
}

.logout-icon:hover {
  color: #ff7875;
  background: rgba(255, 77, 79, 0.1);
}

/* 添加动画效果 */
.nav-icon {
  position: relative;
  overflow: hidden;
}

.username {
  margin-left: 8px;
  font-size: 20px;
  font-weight: bold;
  color: #ff18a6;
}
.nav-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(24, 144, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s;
}

.ant-dropdown-link {
  margin-left: 20px;
}

.nav-icon:active::after {
  width: 50px;
  height: 50px;
}

/* 优化工具提示样式 */
:deep(.ant-tooltip) {
  font-size: 14px;
}

:deep(.ant-tooltip-inner) {
  border-radius: 4px;
  padding: 6px 12px;
}

/* 添加响应式设计 */
@media (max-height: 600px) {
  .nav-icons {
    gap: 16px;
  }

  .nav-icon {
    font-size: 20px;
    padding: 6px;
  }

  .user-avatar {
    width: 40px;
    height: 40px;
  }
}
</style>
